<template>
  <el-drawer
    :title="title"
    v-model="visible"
    :direction="direction"
    :size="800"
    :before-close="beforeClose"
  >
    <section class="drawer-main edit-box">
      <el-form
        label-position="left"
        :model="ruleForm"
        :rules="rules"
        ref="ruleFormRef"
        label-width="120px"
      >
        <el-form-item label="应用名称" prop="appName">
          <el-input v-model="ruleForm.appName" :disabled="isEdit" />
        </el-form-item>
        <el-form-item label="所属部门" prop="orgId">
          <DeptFormSelect
            width="100%"
            ref="deptFormSelect"
            :name="item.orgName"
            :placeholder="`请选择所属部门`"
            v-model:dept="ruleForm.orgId"
            :isEdit="isEdit"
          />
        </el-form-item>
        <el-form-item label="服务商" prop="provider">
          <el-input v-model="ruleForm.provider" />
        </el-form-item>
        <el-form-item label="联系人" prop="contact">
          <el-input v-model="ruleForm.contact" :disabled="isEdit" />
        </el-form-item>
        <el-form-item label="联系电话" prop="tel">
          <el-input v-model="ruleForm.tel" :disabled="isEdit" />
        </el-form-item>
        <el-form-item label="邮箱" prop="email">
          <el-input v-model="ruleForm.email" :disabled="isEdit" />
        </el-form-item>
        <el-form-item label="健康接口" prop="healthUrl">
          <el-input type="textarea" v-model="ruleForm.healthUrl" />
        </el-form-item>
        <el-form-item label="IP白名单" prop="ips">
          <el-input
            type="textarea"
            v-model="ruleForm.ips"
            placeholder="IP地址以英文逗号（,）隔开"
          />
        </el-form-item>
        <el-form-item label="应用描述" prop="memo">
          <el-input type="textarea" v-model="ruleForm.memo" />
        </el-form-item>
        <!-- 编辑应用时必填 appkey appSecret -->
        <template v-if="type === 'update'">
          <el-form-item label="appKey" prop="appKey">
            <el-input v-model="ruleForm.appKey" disabled />
          </el-form-item>
          <el-form-item label="appSecret" prop="appSecret">
            <el-input v-model="ruleForm.appSecret" disabled> </el-input>
          </el-form-item>
        </template>
      </el-form>
    </section>

    <footer class="drawer-footer">
      <el-button @click="close">取 消</el-button>
      <el-button type="primary" @click="submit" :loading="loading">
        确 定
      </el-button>
    </footer>
  </el-drawer>
</template>

<script>
import { defineComponent, watch, computed, ref } from "vue";
import { createApp, updateApp, resetAppSecret } from "@/api/application";
import useEditDrawer from "@/hooks/useEditDrawer";
import DeptFormSelect from "@/components/DeptFormSelect/";
export default defineComponent({
  name: "EditDrawer",
  emits: ["update:modelValue", "update-list"],
  components: { DeptFormSelect },
  props: {
    modelValue: {
      type: Boolean,
      default: false,
    },
    item: {
      type: Object,
      default: () => {},
    },
    // create 新增， update 修改
    type: {
      type: String,
      default: "create",
    },
  },
  setup(props, { emit }) {
    // 表单
    const DEFAULT_FORM = {
      appName: "",
      orgId: "",
      orgName: "",
      provider: "",
      contact: "",
      tel: "",
      email: "",
      appKey: "",
      appSecret: "",
      memo: "",
    };
    const resetApp = async () => {
      let res = await resetAppSecret();
      const { appSecret } = res.data;
      ruleForm.value.appKey = appKey;
      // console.log(res);
    };
    const isEdit = ref();

    // 验证
    const rules = computed(() => {
      const baseRules = {
        appName: [{ required: true, message: "请输入应用名称" }],
        provider: [{ required: true, message: "请输入服务商" }],
        contact: [{ required: true, message: "请输入联系人" }],
        tel: [{ required: true, message: "请输入联系电话" }],
        orgId: [
          { required: true, message: "请选择应用归属部门", trigger: "change" },
        ],
      };

      if (isEdit.value) {
        // 如果是编辑
        baseRules.appKey = [
          { required: true, message: "请输入appKey", trigger: "blur" },
        ];
        baseRules.appSecret = [
          { required: true, message: "请输入appSecret", trigger: "blur" },
        ];
      }

      return baseRules;
    });

    const {
      visible,
      direction,
      title,
      loading,
      ruleForm,
      ruleFormRef,
      beforeClose: close,
      submit,
      beforeClose,
    } = useEditDrawer({
      createApi: createApp,
      editApi: updateApp,
      defaultForm: DEFAULT_FORM,
      emit,
      type: props.type,
      props,
    });
    // 显示时赋值
    watch(visible, (value) => {
      if (value) {
        ruleForm.value = {
          ...DEFAULT_FORM,
          ...props.item,
        };
        console.log(ruleForm.value);
        isEdit.value = props.type === "update";
        console.log({ isEdit: isEdit.value });
      }
    });

    return {
      loading,
      visible,
      direction,
      ruleFormRef,
      ruleForm,
      rules,
      title,
      close,
      submit,
      beforeClose,
      resetApp,
      isEdit,
    };
  },
});
</script>

<style lang="scss" scoped>
$height: 50px;
.drawer-main {
  height: calc(100vh - 160px);
  padding: 0 20px;
  overflow: auto;
}
.drawer-footer {
  text-align: right;
  height: $height;
  line-height: $height;
  padding: 0 20px;
}
</style>
